<template>
    <div id="Customerintent" ref="chart" style="width: 100%; height: 400px;"></div>
    
  </template>
    
  <script setup lang="ts">
  import { ref, watch, onMounted, defineProps } from 'vue';
  import * as echarts from 'echarts';
  
  interface IProps {
    data: Array<any>;
  }
  
  const props = defineProps<IProps>();
  
  const chartRef = ref(null);
  
  // 监听 data 变化，更新图表
  watch(() => props.data, (newData) => {
    // console.log(newData);
    if (newData) {
      const result = newData.map(item => ({  value: item.B, name: item.A }))
      const filteredResult = result.filter(item => item.value !== undefined &&  item.name !== undefined )
      renderChart(filteredResult);
    }
  });
  
  const btn = () => {
    console.log(props.data);
  };
  //   const chartContainer = document.getElementById('dayEcharts');
  //  const chart = echarts.init(chartContainer);
  // 渲染图表
  const renderChart = (data: any) => {
    const chartContainer = document.getElementById('Customerintent');
    const chart = echarts.init(chartContainer);
    // console.log(data);
    // 在这里根据传入的数据配置图表
    const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
};
    chart.setOption(option);
  };
  
  onMounted(() => {
    if (props.data) {
      const result = props.data.map(item => ({  value: item.B, name: item.A }))
      const filteredResult = result.filter(item => item.value !== undefined &&  item.name !== undefined )
      renderChart(filteredResult);
    }
  });
  </script>